<template>
  <div class="content">
    <el-breadcrumb separator="">
      <el-breadcrumb-item><div class="div1">仓库管理</div></el-breadcrumb-item>
      <el-breadcrumb-item><div class="div2">仓库调拨</div></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tab" style="padding-bottom: 0">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待审核" name="0"> </el-tab-pane>
        <el-tab-pane label="驳回" name="1"> </el-tab-pane>
        <el-tab-pane label="已完成" name="2"> </el-tab-pane>
      </el-tabs>
    </div>
    <div
      class="tab"
      style="
        color: #333;
        font-wegin: 600;
        margin-bottom: 10px;
        margin-top: 10px;
        border-radius: 0px 0px 10px 10px;
        padding-top: 10px;
      "
    >
      数据查询
      <el-form
        v-if="activeName == 0"
        ref="form"
        :model="form0"
        label-width="70px"
      >
        <el-form-item label="订单信息">
          <el-input
            size="small"
            v-model="form0.info"
            clearable
            placeholder="请输入调整编号/商品信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-select
            size="small"
            clearable
            v-model="form0.schedule"
            placeholder="请选择"
          >
            <el-option
              v-for="item in proposerList"
              :key="item.label"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="审核人">
              <el-input
                clearable
                style="width:200px;"
                size="small"
                v-model="form0.auditor"
                placeholder="请输入审核人姓名"
              ></el-input>
            </el-form-item> -->
        <el-form-item label="申请时间">
          <el-date-picker
            clearable
            v-model="form0.date"
            type="daterange"
            size="small"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="getList(0)"
            v-on:keyup.enter="getList(0)"
            >搜索</el-button
          >
          <el-button size="mini">取消</el-button>
        </el-form-item>
      </el-form>
      <el-form
        v-if="activeName == 1"
        ref="form"
        :model="form1"
        label-width="70px"
      >
        <el-form-item label="订单信息">
          <el-input
            size="small"
            clearable
            v-model="form1.info"
            placeholder="请输入调整编号/商品信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-select
            size="small"
            clearable
            v-model="form1.schedule"
            placeholder="请选择"
          >
            <el-option
              v-for="item in proposerList"
              :key="item.label"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="审核人">
              <el-input
                clearable
                style="width:200px;"
                size="small"
                v-model="form2.auditor"
                placeholder="请输入审核人"
              ></el-input>
            </el-form-item> -->
        <el-form-item label="申请时间">
          <el-date-picker
            clearable
            v-model="form1.date"
            type="daterange"
            size="small"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="getList(0)"
            v-on:keyup.enter="getList(0)"
            >搜索</el-button
          >
          <el-button size="mini">取消</el-button>
        </el-form-item>
      </el-form>
      <el-form
        v-if="activeName == 2"
        ref="form"
        :model="form2"
        label-width="70px"
      >
        <el-form-item label="订单信息">
          <el-input
            size="small"
            clearable
            v-model="form2.info"
            placeholder="请输入调整编号/商品信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-select
            size="small"
            clearable
            v-model="form2.schedule"
            placeholder="请选择"
            default-first-option
          >
            <el-option
              v-for="item in proposerList"
              :key="item.label"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="审核人">
              <el-input
                clearable
                style="width:200px;"
                size="small"
                v-model="form2.auditor"
                placeholder="请输入审核人"
              ></el-input>
            </el-form-item> -->
        <el-form-item label="申请时间">
          <el-date-picker
            clearable
            v-model="form2.date"
            type="daterange"
            size="small"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="getList(0)"
            v-on:keyup.enter="getList(0)"
            >搜索</el-button
          >
          <el-button size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 10px" v-if="activeName != 2">
      <el-button
        size="mini"
        type="primary"
        @click="ratify"
        v-if="parArray.indexOf('moreApproveCode') != -1 && activeName != 1"
        >批量批准</el-button
      >
      <el-button
        size="mini"
        type="primary"
        v-if="parArray.indexOf('moreBackCode') != -1 && activeName != 1"
        >批量驳回</el-button
      >
      <el-button
        size="mini"
        type="primary"
        @click="batchGuideOrder"
        v-if="parArray.indexOf('batchGuideCode') != -1"
        >批量导单</el-button
      >
    </div>
    <div class="tableContext">
      <el-table
        @row-click="detailClick($event.oddNumbers)"
        @selection-change="handleSelectionChange"
        :data="table.list"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="调拨编号" prop="oddNumbers"></el-table-column>
        <el-table-column label="进度" prop="progressBar"></el-table-column>
        <el-table-column label="申请人" prop="proposerName"></el-table-column>
        <el-table-column label="物流审核" prop="updateBy">
          <template slot-scope="scope">
            <div v-if="scope.row.auditor.物流经理审批">
              {{ scope.row.auditor.物流经理审批 }}
            </div>
            <div v-if="!scope.row.auditor.物流经理审批">--</div>
          </template>
        </el-table-column>
        <el-table-column label="申请时间">
          <template slot-scope="scope">
            {{ $moment(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div class="buttons">
              <!-- <span
                v-if="activeName == 0"
                @click="detailClick(scope.row.oddNumbers)"
                >详情</span
              > -->
              <span
                v-if="
                  scope.row.isApprove == 1 &&
                  activeName == 0 &&
                  parArray.indexOf('dshApproveCode') != -1
                "
                @click.stop="(polliingType = 1), ratify(scope.row)"
                >批准</span
              >
              <span
                style="color: #ff5656"
                v-if="
                  scope.row.isApprove == 1 &&
                  activeName == 0 &&
                  parArray.indexOf('dshBackCode') != -1
                "
                @click.stop="
                  (polliingType = 2),
                    (dowith = true),
                    (signPolliing = scope.row)
                "
                >驳回</span
              >
              <span
                @click.stop="update(scope.row.oddNumbers)"
                v-if="
                  activeName == 1 &&
                  scope.row.isSelf == 1 &&
                  parArray.indexOf('againCode') != -1
                "
                >重开</span
              >
              <span
                @click.stop="queryProcess(scope.row.procInstId)"
                v-if="parArray.indexOf('processCode') != -1"
                >流程</span
              >
              <span
                v-if="
                  scope.row.proposer == userId &&
                  scope.row.isSelf == 1 &&
                  activeName != 2 &&
                  parArray.indexOf('backDeteledCode') != -1
                "
                style="color: #ff5656"
                @click.stop="del(scope.row.oddNumbers)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      size="50%"
      :withHeader="false"
      append-to-body
      :visible.sync="drawer"
      :show-close="false"
      direction="rtl"
    >
      <div class="drawerContext">
        <div class="title">
          <i
            class="el-icon-close"
            @click="drawer = false"
            style="cursor: pointer"
          ></i
          ><span style="margin-left: 20px">库存调拨单详情</span>
        </div>
        <div class="left">
          <div class="tableBorder">
            <div class="title">
              <span>调拨编号：{{ detail.oddNumbers }}</span>
              <span>
                <span style="margin-right: 20px"
                  >申请人：{{ detail.proposerName }}
                </span>
                <span> 创建时间：{{ $moment(detail.createdTime) }}</span>
              </span>
            </div>
            <el-table :data="detail.goods">
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <el-table-column
                label="商品信息"
                prop="goodsName"
              ></el-table-column>
              <el-table-column
                v-for="(item, index) in wareList.list"
                :key="index"
                :label="item.name"
              >
                <template slot-scope="scope">
                  <div
                    v-if="
                      scope.row.wars &&
                      scope.row.wars.find((res) => res.warId == item.id)
                    "
                  >
                    <div>
                      {{
                        scope.row.wars.find((res) => res.warId == item.id)
                          .laterQuantity
                      }}
                    </div>
                    <div>
                      {{
                        scope.row.wars.find((res) => res.warId == item.id)
                          .difference >= 0
                          ? "+" +
                            scope.row.wars.find((res) => res.warId == item.id)
                              .difference
                          : scope.row.wars.find((res) => res.warId == item.id)
                              .difference
                      }}
                    </div>
                  </div>
                  <div v-else>
                    <div>{{ 0 }}</div>
                    <div>+0</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="调整原因"
                prop="warAdName"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 查询流程对话框 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="审核过程"
    >
      <el-table :data="polliing" style="width: 100%">
        <el-table-column type="index" label="步骤" width="50"></el-table-column>
        <el-table-column
          label="任务节点"
          prop="taskName"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="办理人"
          prop="assignee"
          width="110"
        ></el-table-column>
        <el-table-column
          label="审批开始时间"
          prop="startTime"
        ></el-table-column>
        <el-table-column label="审批结束时间">
          <template slot-scope="props">
            <span v-if="props.row.endTime">{{ props.row.endTime }}</span>
            <span v-if="!props.row.endTime">正在处理中...</span>
          </template>
        </el-table-column>
        <el-table-column label="审批意见" :show-overflow-tooltip="true">
          <template slot-scope="props">
            <span v-if="props.row.comment">{{ props.row.comment }}</span>
            <span v-if="!props.row.comment">/</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dowith" :append-to-body="true" title="办理">
      <span style="display: inline-block; line-height: 30px">审批意见:</span>
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
      ></el-input>
      <div
        style="display: flex; flex-direction: row-reverse; padding: 10px 0px"
      >
        <el-button size="small" type="primary" @click="ratify(signPolliing)"
          >驳回</el-button
        >
      </div>
    </el-dialog>

    <div style="height: 50px"></div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="table.pageNo"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.totalPage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data () {
    return {
      signPolliing: {},
      textarea: "",
      polliingType: 1,
      dowith: false,
      polliing: [],
      dialogFormVisible: false,
      multipleSelection: [], //展示的列表
      drawer: false,
      proposerList: [], //申请人
      detail: {
        goods: [],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      wareList: {
        list: [],
      },
      activeName: "0",
      form0: {
        info: "",
        schedule: "",
        auditor: "",
        date: []
      },
      userId: sessionStorage.getItem("user_id"),
      form1: {
        info: "",
        schedule: "",
        auditor: "",
        date: []
      },
      form2: {
        info: "",
        schedule: "",
        auditor: "",
        date: []
      },
      table: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
      pageSize: 10,
      limits: "",
      parArray: [],
    };
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "warehousesListcode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    this.axios
      .post("order/comm/commWarehouse/list", {
        pageSize: 999,
        pageNo: 1
      }, {
        headers: {
          isLoading: false,
        },
      })
      .then((res) => {
        //仓库数据接口
        this.wareList = res.data;
        this.wareList.list = this.wareList.list.reverse();
      });
    this.getProposer();

    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.getList(0);
      }
    };
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  activated () {
    this.getList();
  },
  methods: {
    batchGuideOrder () {
      if (!this.multipleSelection.length) {
        this.$message.warning("没选择");
        return;
      }
      this.download(
        "/order/stockControl/allotExportExcel",
        this.multipleSelection.map((res) => res.oddNumbers)
      );
    },
    queryProcess (e) {
      this.axios
        .get("/order/order/user/selectHiTask?taskId=" + e, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.polliing = res.data;
            if (this.polliing[0].taskName == "物流经理审批") {
              this.polliing.push({
                assignee: this.polliing[0].assignee,
                comment: "物流经理提交订单",
                endTime: this.polliing[0].endTime,
                proinstance: this.polliing[0].proinstance,
                startTime: this.polliing[0].startTime,
                taskId: this.polliing[0].taskId,
                taskName: "物流经理提交",
              });
            }
            this.dialogFormVisible = true;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    ratify: _.debounce(function (e) {
      if (!this.multipleSelection.length && !e.procInstId) {
        this.$message.warning("还没选择");
        return;
      }
      if (!e.procInstId) {
        this.axios
          .post("/order/stockControl/commitTask", {
            comment: this.textarea,
            orderIds: this.multipleSelection.map((res) => res.oddNumbers),
            proInsIds: this.multipleSelection.map((res) => res.procInstId),
            result: this.polliingType,
            type: "1",
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("驳回成功");
              this.getList();
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.axios
          .post("/order/stockControl/commitTask", {
            comment: this.textarea,
            orderIds: new Array(e.oddNumbers),
            proInsIds: new Array(e.procInstId),
            result: this.polliingType,
            type: "1",
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("批准成功");
              this.getList();
              this.dowith = false;
            } else {
              this.$message.error(res.message);
            }
          });
      }
    }, 500),
    exportPdf: _.debounce(function () {
      this.$PDFSave(this.$refs.tablePdf, "我的文件");
    }, 500),
    printPdf: _.debounce(function () {
      this.$refs.easyPrint.print();
    }, 500),
    update (e) {
      this.axios
        .get("/order/stockControl/allotDetails?oddNumber=" + e)
        .then((res) => {
          this.$router.push({
            name: "wareUpdate",
            query: {
              obj: JSON.stringify({
                gids: res.data.goods.map((res) => Number(res.goodsId)),
                gType: res.data.goods[0].gtype,
                type: "TB",
                isNewO: e,
              }),
            },
          });
        });
    },
    flow (e) { },
    del (e) {
      let temp = "/order/stockControl/close?oddNumber=" + e;
      if (this.activeName == 1) {
        temp += "&type=1";
      }
      this.axios.get(temp).then((res) => {
        this.getList();
        this.$message.success("删除成功");
      });
    },
    handleSizeChange (val) {
      this.table.pageSize = val;
      this.getList();
    },
    handleCurrentChange (val) {
      this.getList();
    },
    countUpdate (e, t) {
      if (!t) {
        return e.reduce((e1, e2) => e1.frontQuantity + e2.frontQuantity);
      }
      return e.reduce((e1, e2) => e1.difference + e2.difference);
    },
    detailClick (e) {
      this.axios
        .get("/order/stockControl/allotDetails?oddNumber=" + e)
        .then((res) => {
          this.detail = res.data;
          this.drawer = true;
        });
    },
    getProposer () {
      this.axios.post("/order/stockControl/applicantList").then((res) => {
        this.proposerList = res.data;
      });
    },
    handleClick () {
      this.getList();
    },
    onSubmit () { },
    getList (e) {
      let temp = this.form0;
      if (e == 1) {
        temp = this.form1;
      } else if (e == 2) {
        temp = this.form2;
      }
      this.axios
        .post("/order/stockControl/allotList", {
          endTime: temp.date.length ? temp.date[1] + " 00:00:00" : "",
          flow: this.activeName == "2" ? 3 : this.activeName,
          pageNo: e != 0 ? this.table.pageNo : 1,
          pageSize: this.table.pageSize,
          startTime: temp.date.length ? temp.date[0] + " 59:59:59" : "",
          keyWord: temp.info,
          proposerName: temp.schedule,
          type: 1,
        })
        .then((res) => {
          if (res.code == 0) {
            this.table = res.data;
          } else {
            this.$message.error(res.data);
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

/deep/.el-form-item {
  margin-bottom: 0px;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-input__inner {
  // width: 250px;
  height: 28px;
  line-height: 28px;
}

/deep/.el-table td,
.el-table th.is-leaf {
  text-align: center;
}
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-form {
  display: flex;
  flex-wrap: wrap;
  /deep/.el-input__inner {
    width: 250px;
    clear: both;
  }
  /deep/ .el-form-item label:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
  /deep/ .el-form-item__label {
    text-align: justify;
    height: 50px;
  }
}
/deep/.el-form-item {
  margin-right: 10px;
}
.div1 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.content {
  position: relative;
  .tab {
    margin-top: 20px;
    background: #fff;
    padding: 0px 10px;
    border-radius: 10px 10px 0px 0px;
  }
  .tableContext {
    margin-top: 10px;
    .buttons {
      span {
        margin-right: 10px;
        color: #4168e7;
        cursor: pointer;
      }
    }
  }
}
/deep/.el-drawer:focus {
  outline: none;
}
.drawerContext {
  .title {
    border-bottom: 1px solid #d9d9d9;
    padding: 10px;
  }
  .left {
    height: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    .tableBorder {
      border: 1px solid #d9d9d9;
      margin-top: 10px;
      .title {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        border-bottom: 1px solid #d9d9d9;
        font-size: 14px;
        padding: 10px 10px;
      }
    }
  }
}
.page {
  position: fixed;
  background: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  padding-right: 20px;
  z-index: 100;
}
.table_style {
  margin: auto;
  td {
    text-align: center;
  }
}
</style>
